<html>

<head>
    <title>NGO Collaboration Platform</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <link rel="stylesheet" href="./stylesheets/style.css">
    <script>
        var data = {};
        var username = getUsername(window.location);

        $(document).ready(function () {
            $("td").click(function (e) {
                var needid = $(e.target).attr("needid");
                if (needid) {
                    var qty = prompt("Please provide the quantity you would like to pledge ", "");
                    if (qty != null && qty != 'null') {
                        data["needId"] = needid;
                        data["qty"] = qty;
                        data["status"] = "Pledged";
                        data["ngo"] = username;

                        window.location = "../dashboard?ngo=" + username + "&needId=" + needid + "&qty=" + qty;
                    }
                } else {
                    var needid = $(this).closest('tr').find('td:eq(0)').text().trim();
                    var createdby = $(this).closest('tr').find('td:eq(1)').text().trim();
                    var requiredqty = $(this).closest('tr').find('td:eq(4)').text().trim();
                    // open a new page with need details
                    window.location = "../needdetails?username=" + username + "&needid=" + needid + "&createdby=" + createdby + "&requiredqty=" + requiredqty;
                }
            });

            $("#back_to_home_page").click(function (e) {
                window.location = "../menu?username=" + username;
            });
        });

        function getUsername() {
            var params = window.location.search.substring(1).split("&");

            for (var i = 0; i < params.length; i++) {
                var pair = params[i].split('=');
                if (pair[0] === 'username' || pair[0] === 'uname' || pair[0] === 'ngo') {
                    return pair[1];
                }
            }
            return null;
        }
    </script>

</head>

<body class="body">
    <div id="header" class="header">
        NGO Collaboration Platform
    </div>
    <br/>

    <div id="header2" class="header2">
        Active Needs
    </div>
    <p></p>
    <div>
        <% if( isData ){ %>
            <table id="dashtable" data-role="table" border="1" class="dashboardTable">
                <thead>
                    <tr>
                        <th>Need ID</th>
                        <th>Created By</th>
                        <th>Created On</th>
                        <th>Category</th>
                        <th>Quanity Required</th>
                        <th>Pledged Qty</th>
                        <th>Expected Date of Fullfillment</th>
                        <th>Pledge</th>
                    </tr>
                </thead>
                <tbody>
                    <% for (var i=0; i<needs.length; i++){ %>
                        <tr>
                            <td>
                                <%= needs[i].need_id %>
                            </td>
                            <td>
                                <%= needs[i].created_by %>
                            </td>
                            <td>
                                <%= needs[i].created_date %>
                            </td>
                            <td>
                                <%= needs[i].need_category %>
                            </td>
                            <td>
                                <%= needs[i].quantity %>
                            </td>
                            <td>
                                <%= needs[i].pledged %>
                            </td>
                            <td>
                                <%= needs[i].expected_fulfilment_date %>
                            </td>
                            <td>
                                <input type="button" value="Pledge" id="pledge" class="pledgeButton" needid=<%=needs[i].need_id %> />
                            </td>
                        </tr>
                        <% } %>
                </tbody>
            </table>
            <div class="note">
                **Click on a row to get more details for a need.
            </div>
            <% }
        else{
            %>
                <b>No active needs available</b>
                <%
        }
         %>
                    <br/>
                    <div style="width: 100%; text-align: center">
                        <input type="button" class="pledgeButton" value="Back to Home Page" id="back_to_home_page" />
                    </div>

    </div>
    <script>
        var result = '<%=pledgeStatus%>';
        if (result && result.length > 0) {
            alert('<%=pledgeStatus%>');
            result = '';
        }
    </script>

</body>

</html>